<!DOCTYPE html>
<html>

  <head>
    <title>CatCat</title>
    <!-- <link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css"> -->
    <style>
      .red-text {
        color: red;
      }

      h2 {
        font-family: "Lobster", monospace;
      }

      p {
        font-size: 16px;
        font-family: monospace;
      }

      .smaller-image {
        width: 100px;
      }

      .thin-red-border {
        border-color: red;
        border-width: 5px;
        border-style: solid;
      }

      .thick-green-border {
        border-color: green;
        border-width: 10px;
        border-style: solid;
        border-radius: 50%;
      }

      .silver-background {
        background-color: silver;
      }

      #cat-photo-form {
        background-color: green;
      }

      [type="checkbox"] {
        margin-top: 10px;
        margin-bottom: 15px;
      }
    </style>
  </head>

  <body>
    <h2 class="red-text">CatPhotoApp</h2>
    <main>
      <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
      <a href="#">
        <img class="smaller-image thick-green-border" src="./relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
      </a>
      <div class="silver-background">
        <p>Things cats love:</p>
        <ul>
          <li>cat nip</li>
          <li>laser pointers</li>
          <li>lasagna</li>
        </ul>
        <p>Top 3 things cats hate:</p>
        <ol>
          <li>flea treatment</li>
          <li>thunder</li>
          <li>other cats</li>
        </ol>
      </div>
      <form id="cat-photo-form" action="/submit-cat-photo">
        <label for="indoor"><input id="indoor" value="indoor" type="radio" name="indoor-outdoor" checked> Indoor</label>
        <label for="outdoor"><input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor</label>
        <br>
        <label for="loving"><input id="loving" value="loving" type="checkbox" name="personality" checked> Loving</label>
        <label for="hating"><input id="hating" value="hating" type="checkbox" name="personality"> Hating</label>
        <label for="evil"><input id="evil" value="evil" type="checkbox" name="personality"> Evil</label>
        <br>
        <input type="text" placeholder="cat photo URL" required>
        <button type="submit">Submit</button>
      </form>
    </main>
  </body>

</html>
